<template>
   <Container class="patrol-detail" v-if="this.$route.query.id">
    <div class="container-header title title-center" slot="header">巡店统计详情
      <Button size="large" class="fl btn-back"  icon="ios-arrow-back" @click="$router.back()">返回</Button>
    </div>
    <div :bordered="false" dis-hover class="ivu-mt bg-light mt pt0">
      <div class="container-title">基本信息</div>
      <Form :label-width="120">
        <FormItem label="门店名称：">{{detail.storeName}}</FormItem>
        <FormItem label="门店类型：">{{detail.storeTypeName}}</FormItem>
        <FormItem label="门店联系人：">{{detail.storeContactName}}</FormItem>
        <FormItem label="联系电话：">{{detail.storeContactPhone}}</FormItem>
        <FormItem label="经营品牌：">{{detail.masterBrandName}}</FormItem>
        <FormItem label="门店签约地址：">{{detail.address}}</FormItem>
        <Row>
          <Col span="8">
            <FormItem label="巡店变更记录：" v-if="detail.salesmanInspectionDTOS.length">
              <Select v-model="salesmanInspectionDTOS" @on-change="onSelectShop">
                <Option v-for="(item, index) of detail.salesmanInspectionDTOS" :key="index" :value="item">{{item.createDate}} {{item.operatorName}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="巡店地址：" v-if="detail.salesmanInspectionDTOS.length">{{salesmanInspectionDTOS.location}}</FormItem>
        <FormItem label="门头照：" v-if="detail.salesmanInspectionDTOS.length">
          <img class="info-img w50" :src="salesmanInspectionDTOS.headImageUrl" alt />
        </FormItem>
        <FormItem label="内部照：" v-if="detail.salesmanInspectionDTOS.length">
          <ul class="fill-img">
            <li v-for="(item, index) of salesmanInspectionDTOS.innerImageUrls" :key="index">
              <img class="info-img mr" :src="item" alt />
            </li>
          </ul>
        </FormItem>
      </Form>
    </div>
    <Loader :status="status" @refresh="getData"></Loader>
</Container>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      detail: {
        salesmanInspectionDTOS: []
      },
      salesmanInspectionDTOS: [],
      status: 'pass'
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.status = 'loading'
      this.$ajaxPost('/salesman/inspection/details', {inspectionTaskId: this.id}).then(res =>{
        this.detail = res
        this.status = 'pass'
        this.salesmanInspectionDTOS = res.salesmanInspectionDTOS[0]
      })
    },
    onSelectShop(row) {
      this.salesmanInspectionDTOS = row
    }
  }
};
</script>
